<template>
	<view class="login-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" title="安丘市人大代表履职通"></uni-navbar></view>

		<view class="fiexd-box">
			<view class="code-box">
				<image class="code-logo" src="/static/img/logo_s.png" mode="aspectFill"></image>
				<view class="code-item">
					<view class="clamp" :class="form.clientCode == 3707 ? 'active' : ''" @click="codeTap(3707)">安丘市</view>

					<view class="clamp" :class="form.clientCode == 370705 ? 'active' : ''" @click="codeTap(370705)">奎文区</view>
					<view class="clamp" :class="form.clientCode == 370702 ? 'active' : ''" @click="codeTap(370702)">潍城区</view>
					<view class="clamp" :class="form.clientCode == 370704 ? 'active' : ''" @click="codeTap(370704)">坊子区</view>
					<view class="clamp" :class="form.clientCode == 370703 ? 'active' : ''" @click="codeTap(370703)">寒亭区</view>
					<view class="clamp" :class="form.clientCode == 370781 ? 'active' : ''" @click="codeTap(370781)">青州市</view>

					<view class="clamp" :class="form.clientCode == 370782 ? 'active' : ''" @click="codeTap(370782)">诸城市</view>
					<view class="clamp" :class="form.clientCode == 370783 ? 'active' : ''" @click="codeTap(370783)">寿光市</view>
					<view class="clamp" :class="form.clientCode == 370784 ? 'active' : ''" @click="codeTap(370784)">安丘市</view>
					<view class="clamp" :class="form.clientCode == 370785 ? 'active' : ''" @click="codeTap(370785)">高密市</view>
					<view class="clamp" :class="form.clientCode == 370786 ? 'active' : ''" @click="codeTap(370786)">昌邑市</view>

					<view class="clamp" :class="form.clientCode == 370724 ? 'active' : ''" @click="codeTap(370724)">临朐县</view>
					<view class="clamp" :class="form.clientCode == 370725 ? 'active' : ''" @click="codeTap(370725)">昌乐县</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniImgCode from '@/components/uni-img-code.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniImgCode
	},
	data() {
		return {
			tabsCurrent: 0,
			tabsList: [
				{
					name: '手机登录',
					value: 0
				},
				{
					name: '密码登录',
					value: 1
				}
			],

			show: false,
			sdtCode: '',
			codeTips: '获取验证码',
			form: {
				tel: '',
				smsCode: '',
				clientCode: 370784
			},
			form1: {
				username: '',
				password: '',
				clientCode: 370784,
				code: ''
			}
		};
	},
	onLoad(option) {
		this.$logout();
		this.form1.username = uni.getStorageSync('username');
		this.form1.password = uni.getStorageSync('password');
		// this.form1.username = '370784';
		// this.form1.password = '1';
		
		if (option && option.code) {
			this.sdtCode = option.code;
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		this.$refs.uForm1.setRules(this.rules);
	},
	onShareAppMessage(res) {
		return {
			title: '安丘市人大代表履职通',
			path: '/pages/index/index'
		};
	},
	onShareTimeline(res) {
		return {};
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		codeTap(e) {
			this.form.clientCode = e;
			this.form1.clientCode = e;
			
			let data = {
				code: this.sdtCode,
				clientCode: e
			};
			this.$request('/shandongtong', data).then((res) => {
				if (res.data.msg && res.data.msg.indexOf('手机号未注册') != -1) {
					uni.showModal({
						title: '提示',
						confirmText: '拨打电话',
						content: '您输入的手机号在平台中没有匹配到，无法核实您的信息，请联系管理员解决！',
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.tel
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}
			
				if (!res.data.Authorization) {
					this.$msg('登录失败！');
					return false;
				}
				let userInfo = res.data;
				this.$store.commit('login', userInfo);
			
				uni.reLaunch({
					url: '/pages/index/index'
				});
			});
		},
		codeChange(text) {
			this.codeTips = text;
		},
		tabsChange(index) {
			this.tabsCurrent = index;
		},
		nameLogin() {
			uni.navigateTo({
				url: '/pages/login/scan'
			});
		},
		getCode() {
			let data = {};
			if (this.$refs.uCode.canGetCode) {
				this.$request('/sms/code?tel=' + this.form.tel, data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		submit(e) {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				}
				// this.login(this.form);

				// #ifdef MP
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.login(loginRes);
					}
				});
				// #endif
				// #ifndef MP
				this.login({ code: '233' });
				// #endif
			});
		},
		login(loginRes) {
			let form = {
				tel: this.form.tel,
				smsCode: this.form.smsCode,
				clientCode: this.form.clientCode,
				wxCode: loginRes.code
			};

			this.$request('/sms/login', form, {
				content: 'application/x-www-form-urlencoded',
				load: true
			}).then((res) => {
				if (res.data.msg && res.data.msg.indexOf('手机号未注册') != -1) {
					uni.showModal({
						title: '提示',
						confirmText: '拨打电话',
						content: '您输入的手机号在平台中没有匹配到，无法核实您的信息，请联系管理员解决！',
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.tel
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}
				if (!res.data.Authorization) {
					this.$msg('登录失败');
					return false;
				}
				let userInfo = res.data;
				this.$store.commit('login', userInfo);

				uni.reLaunch({
					url: '/pages/index/index'
				});
			});
		},
		submitForm() {
			const imgCode = uni.getStorageSync('imgcode');
			this.$refs.uForm1.validate((valid) => {
				if (!valid) {
					return false;
				}

				// #ifdef MP
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.loginForm(loginRes);
					}
				});
				// #endif
				// #ifndef MP
				this.loginForm({ code: '233' });
				// #endif
			});
		},
		loginForm(loginRes) {
			let form = {
				username: this.form1.username + ',' + this.form1.clientCode,
				password: this.$rsa(this.form1.password),
				code: this.form1.code,
				clientCode: this.form1.clientCode,
				wxCode: loginRes.code
			};

			this.$request('/myLogin', form, {
				content: 'application/x-www-form-urlencoded',
				load: true
			}).then((res) => {
				if (!res.data.Authorization) {
					this.$msg('登录失败！');
					return false;
				}
				let userInfo = res.data;
				this.$store.commit('login', userInfo);

				uni.setStorageSync('username', this.form1.username);
				uni.setStorageSync('password', this.form1.password);

				if (userInfo.sysUser.remark7 == '0' || userInfo.sysUser.remark7 == '3' || userInfo.sysUser.remark7 == '4') {
					let pwdMsg = userInfo.sysUser.remark9;
					this.$msg(pwdMsg ? pwdMsg : '初始密码，请先修改密码！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/password?id=' + userInfo.sysUser.id
						});
					}, 500);
					return false;
				}

				uni.reLaunch({
					url: '/pages/index/index'
				});
			});
		}
	}
};
</script>

<style lang="scss">
.login-view {
	min-height: 100vh;
	overflow: hidden;
	// background: #fff no-repeat top center;
}

.logo-box {
	text-align: center;
	// background-color: #e5231a;

	.logo-ttl {
		position: relative;
		margin: 0 auto 20rpx;
		width: 100%;
		// height: 540rpx;
	}

	.h1-img {
		position: absolute;
		left: 50%;
		top: 120rpx;
		width: 520rpx;
		transform: translateX(-50%);
	}

	.bg-img {
		width: 100%;
		height: 540rpx;
	}
}

.container {
	position: relative;
	margin: -100rpx 30rpx 0;
	padding: 40rpx 0;
	border-radius: 12rpx;
	background-color: #fff;
}

.code-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background-color: #fff;

	.code-logo {
		display: block;
		margin: 66rpx auto 48rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.code-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 66rpx;

		.clamp {
			margin-bottom: 40rpx;
			max-width: 48%;
			width: 300rpx;
			height: 92rpx;
			font-size: 17px;
			color: #e5231a;
			line-height: 88rpx;
			border-radius: 8rpx;
			text-align: center;
			border: 1rpx solid #e5231a;
		}

		.active {
			color: #fff;
			background-color: #e5231a;
		}
	}
}

.logo-ttl2 {
	margin: 0 auto 40rpx;
	width: 368rpx;
	height: 40rpx;

	.image {
		display: block;
		width: 368rpx;
		height: 40rpx;
	}
}

.tab-box {
	display: block;
	padding-top: 20rpx;
	border-top: 2rpx solid #f5f7fa;
}

.form-box {
	position: relative;
	z-index: 300;
	margin: 20rpx 48rpx;

	.dataTime {
		width: 100%;
	}

	.code {
		padding: 0 16rpx;
		color: #d0021b;
	}

	.form-btn {
		display: block;
		margin-top: 40rpx;
		width: 100%;
	}
}

.fiexd-box {
	margin: 40rpx 0;

	.fiexd-item {
		padding: 20rpx 0;
		width: 100%;
		text-align: center;
	}
}
</style>
